<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        tr td {
            border: 1px solid #333;
            padding: 20px;
            text-align: center;
        }

        table {
            width: 50%;
            background: orange;
            margin-top: 20px;
        }


        ul {
            display: flex;
            padding: 10px;
            background: pink;
            width: 70%;
            list-style: none;
        }

        li {
            margin: 0 10px;
            flex: 1;
            padding: 20px;
        }

        .zoom-enter-active {
            animation: zoomInDown .8s both;
        }

        .zoom-leave-active {
            animation: zoomOutDown 0.5s both;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2> {{title}} </h2>
        <Head-one></Head-one>
        <hr>
        <!-- <button @click="toggle=!toggle"> {{toggle?"表格展示":'列表展示'}}</button>
        <mytable v-show="toggle" :cars="cars"> </mytable>
        <mylist v-show="!toggle" :cars="cars"></mylist> -->
        <select v-model="cptId">
            <option value="mytable">表格展示</option>
            <option value="mylist"> 列表展示</option>
        </select>
        <transition name="zoom" mode="out-in">
            <!-- 失活的组件将会被缓存！-->
            <keep-alive>
                <component :is="cptId" :cars="cars"></component>
                <keep-alive>
        </transition>
    </div>

    <template id="mytable">
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>品牌</td>
                    <td>颜色</td>
                    <td>型号</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(car,key,index) in cars" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{car.brand}}</td>
                    <td>{{car.color}}</td>
                    <td>{{car.model}}</td>
                </tr>
            </tbody>
        </table>
    </template>

    <template id="mylist">
        <ul>
            <li v-for="(car,key,index) in cars" :key="index">
                <p>序号：{{index+1}}</p>
                <p>品牌：{{car.brand}}</p>
                <p>颜色：{{car.color}}</p>
                <p>型号：{{car.model}}</p>
            </li>
        </ul>
    </template>
</body>
<script>
    const head = {
        template: "<h2>Head - Head - WH2110-daydayup</h2>"
    }
    Vue.component("HeadOne", head)
    var cars = {
        car01: { brand: "Ford", model: "Mustang", color: "red" },
        car02: { brand: "Fiat", model: "500", color: "white" },
        car03: { brand: "Volvo", model: "XC90", color: "black" }
    }

    Vue.component("mytable", {
        template: "#mytable",
        props: ["cars"],
        mounted() {
            console.log("我被新建了--table");
        },
        // 激活
        activated() {
            console.log("mytable 组件被激活了... ");
        },
        // 失活
        deactivated() {
            console.log("mytable 组件失活了... ")

        }
    })
    // 根实例 根组件
    Vue.component("mylist", {
        template: "#mylist",
        props: ['cars']
    })

    const vm = new Vue({
        data: {
            title: "Vue 组件 动态组件切换     ",
            word: 'wh2110-daydayup',
            toggle: true,
            cptId: "mytable",
            cars
        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;
        }
    }).$mount("#app")
</script>
<!-- 
    component  官方组件
    is 属性     表示当前显示的组件 组件名称
    keep-alive  （记录滑动的高度） 失活的组件将会被缓存！ 下一次失活组件重新激活的时候 会直接调用缓存数据  性能优化

    activated   激活
    deactivated 失活

    transition  过渡组件

    组件切换
    1.v-if
    2.v-show
    3.component
    4.路由 route
 -->

</html>